<template>
    <div>

        <div class="tableBox">
            <el-table :data="tableDatas" style="width: 100%" border :span-method="spanMethod" size="mini">

                <el-table-column prop="name" label="省份Top3">
                </el-table-column>
                <el-table-column prop="qymc" label="客户Top3">
                </el-table-column>
                <el-table-column prop="hwhlwmc" label="商品名称Top3">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>


<script>

export default {
    name: 'ghxsfx',
    props: {
        rowData: {
            type: Array, default: function () {
                return []
            }
        },


    },
    data() {
        return {
            loading: false,
            tableDatas: [
               
            ],
        }
    },
    mounted() {

    },
    watch: {
        rowData: {
            handler(newVal, oldVal) {
                // this.initChart(newVal)
                this.tableDatas = newVal
                console.log('user对象发生了变化', newVal, oldVal);
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        spanMethod({ row, column, rowIndex, columnIndex }) {
            //定义需要合并的列字段，有哪些列需要合并，就自定义添加字段即可
            const fields = ['name']   // 直接在里面添加需要合并的字段
            // 判断只合并定义字段的列数据
            // 当前行的数据
            const cellValue = row[column.property]
            let countRowspan = 1 //用于合并计数多少单元格
            if (cellValue && fields.includes(column.property)) {
                const prevRow = this.tableDatas[rowIndex - 1] //上一行数据
                let nextRow = this.tableDatas[rowIndex + 1] //下一行数据

                // 当上一行的数据等于当前行数据时，当前行单元格隐藏
                if (prevRow && prevRow[column.property] === cellValue && prevRow.declareRegion == row.declareRegion) {
                    return { rowspan: 0, colspan: 0 }
                } else {
                    // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格
                    while (nextRow && nextRow[column.property] === cellValue && nextRow.declareRegion == row.declareRegion) {
                        nextRow = this.tableDatas[++countRowspan + rowIndex]
                    }
                    if (countRowspan > 1) {
                        return { rowspan: countRowspan, colspan: 1 }
                    }
                }
            }
        }

    },
}
</script>


<style lang="scss" scoped>
.echartBox {
    margin-bottom: 15px;
    border: 1px solid rgb(221, 221, 221);
    background: #f5f5f5;
}
</style>